<template>
    <div>
        <Test>
            <!-- 默认插槽 -->
            <pre>大江东去浪淘尽,千古分流人物</pre>
            <!-- 具名插槽填充a -->
            <template v-slot:a>
                <div>我是填充具名插槽a位置结构</div>
            </template>
            <!-- 具名插槽填充b v-slot指令可以简化为# -->
            <template #b>
                <div>我是填充具名插槽b位置结构</div>
            </template>
        </Test>
        <Test1>
            <template v-slot="{ $row, $index }">
                <p :style="{ color: $row.done ? 'green' : 'red' }">
                    这是作用域插槽的结构：{{ $row.title }}--{{ $index }}
                </p>
            </template>
        </Test1>
    </div>
</template>

<script setup lang="ts">
import Test from "./Test.vue";
import Test1 from "./Test1.vue";

</script>

<style scoped></style>